<template>
    <uni-popup ref="gzhCode" type="center">
        <div class="gzh_code">
            <image src="/static/images/article-change-suc.webp" mode="widthFix" />
            <i @click="close" class="icon-close"></i>
            <h1 v-if="title">{{title}}</h1>
            <p class="tip">扫码领取您的获客文章吧</p>
            <div class="long_press">
                <span>长按识别</span>
                <i class="icon-line-arrow-bottom"></i>
                <span>关注公众号</span>
                <!-- <i class="icon-line-arrow-bottom"></i>
                <span>领取</span> -->
            </div>
            <div class="code">
                <image :src="codeUrl" mode="" />
            </div>
        </div>
    </uni-popup>
</template>

<script>
import { createQRcode } from '@/utils/draw'
import { createWxPubCode } from '@/request/art'
export default {
    data() {
        return {
            title: '',
            codeUrl: ''
        }
    },
    methods: {
        open(data) {
            return new Promise((resolve, reject) => {
                createWxPubCode({
                    refType: data.refType, //00文章，01视频，02早晚安
                    refId: data.refId,
                }).then(res => {
                    // createQRcode('http://weixin.qq.com/q/02hLCsQBaFexD1iPKMxBcu').then(rst => {
                    //     this.codeUrl = rst
                    // })
                    this.codeUrl = res.data.url
                    this.$refs.gzhCode.open()
                })
            })
        },
        close() {
            this.$refs.gzhCode.close()
        }
    }

}
</script>

<style lang="less" scoped>
    .gzh_code{
        position: relative;
        width: 600rpx;
        background: #fff;
        border-radius: 20rpx;
        padding: 60rpx 0 40rpx;
        i.icon-close{
            position: absolute;
            top: 0;
            right: 0;
            width: 70rpx;
            height: 70rpx;
            font-size: 26rpx;
            color: #999;
        }
        >image{
            position: absolute;
            width: 300rpx;
            left: 50%;
            top: -140rpx;
            transform: translateX(-50%);
        }
        h1{
            font-size: 46rpx;
            line-height: 50rpx;
            font-weight: bold;
            text-align: center;
            // padding-top: 60rpx;
            color: #333;
        }
        >.tip{
            font-size: 32rpx;
            text-align: center;
            line-height: 32rpx;
            padding-top: 40rpx;
            margin-bottom: 44rpx;
        }
        .long_press{
            width: 500rpx;
            display: flex;
            border-top: 1px solid #ccc;
            .align(center);
            margin: 0 auto;
            padding-top: 44rpx;
            font-weight: bold;
            font-size: 36rpx;
            i{
                font-weight: bold;
                transform: rotate(-90deg);
                margin: 0 20rpx;
                font-size: 26rpx;
            }
        }
        .code{
            width: 320rpx;
            height: 320rpx;
            margin: 40rpx auto;
            image{
                width: 100%;
                height: 100%;
            }
        }

    }

</style>